<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data:; connect-src 'self'">
    <title class="text-content" data-i18n="main.title">Game Save Manager</title>
    <link href="../../../node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <link href="../css/styles_addition.css" rel="stylesheet">
    <script defer src="../js/utility.js"></script>
    <script src="../js/commonTabs.js"></script>
    <script src="../js/backupTab.js"></script>
    <script src="../js/restoreTab.js"></script>
    <script src="../js/customTab.js"></script>
</head>

<body class="bg-white dark:bg-gray-900 p-8 pt-2 overflow-hidden">
    <!-- Top right alerts and progresses -->
    <div class="fixed top-3 right-5 z-30">
        <div id="progress-container"></div>
        <div id="alert-container"></div>
    </div>

    <!-- Modals -->
    <div id="modal-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
    <div id="modal" tabindex="-1" aria-hidden="true"
        class="hidden animate-fadeInShift overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 max-h-[calc(100%-1rem)]">
        <div class="relative p-4 w-full max-w-2xl max-h-full">
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                    <h3 id="modal-title" class="text-xl font-semibold text-gray-900 dark:text-white"></h3>
                    <button type="button" id="modal-close"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
                        <svg class="w-3 h-3" aria-hidden="true" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>

                <div
                    class="break-all max-h-[calc(100vh-250px)] p-4 md:p-5 space-y-4 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-track-white scrollbar-thumb-slate-300 dark:scrollbar-track-gray-800 dark:scrollbar-thumb-slate-600">
                    <p id="modal-content" class="text-base leading-relaxed text-gray-500 dark:text-gray-400"></p>
                </div>

                <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                    <button type="button" id="modal-confirm"
                        class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700">Ok</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tab selections -->
    <div class="mb-4 border-b border-gray-200 dark:border-gray-700 flex flex-row">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="main-tab"
            data-tabs-toggle="#main-tab-content" role="tablist">
            <li class="me-2" role="presentation">
                <button
                    class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                    id="backup-tab" data-tabs-target="#backup" type="button" role="tab" aria-controls="backup"
                    aria-selected="false" data-i18n="main.backup">
                    <i class="fa-solid fa-cloud-arrow-up mr-2"></i>
                    <span class="text-content">Backup</span>
                </button>
            </li>
            <li class="me-2" role="presentation">
                <button
                    class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                    id="restore-tab" data-tabs-target="#restore" type="button" role="tab" aria-controls="restore"
                    aria-selected="false" data-i18n="main.restore">
                    <i class="fa-solid fa-cloud-arrow-down mr-2"></i>
                    <span class="text-content">Restore</span>
                </button>
            </li>
            <li role="presentation">
                <button
                    class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                    id="custom-tab" data-tabs-target="#custom" type="button" role="tab" aria-controls="custom"
                    aria-selected="false" data-i18n="main.custom">
                    <i class="fa-solid fa-file-circle-plus mr-2"></i>
                    <span class="text-content">Custom Games</span>
                </button>
            </li>
        </ul>
    </div>

    <div id="default-tab-content">
        <!-- Tab 1: Backup -->
        <div class="hidden" id="backup" role="tabpanel" aria-labelledby="backup-tab">
            <div id="backup-loading" role="status" class="flex justify-center" data-i18n="main.loading"></div>

            <!-- Backup summary -->
            <div id="backup-summary" class="w-full p-8 text-center hidden animate-fadeInShift">
                <h5 data-i18n="main.backup_complete" class="mb-8 text-5xl font-bold text-gray-900 dark:text-white">
                    <span class="text-content">Backup Complete</span>
                </h5>

                <div class="flex justify-center items-center mb-8">
                    <i class="fa-solid fa-circle-check text-green-500 fa-5x"></i>
                </div>

                <div class="text-lg text-gray-700 dark:text-gray-300 mb-6">
                    <p class="mb-4" data-i18n="summary.total_games_backed_up">
                        <span class="text-content">Total games backed up:</span>
                        <span id="backup-summary-total-games"
                            class="font-semibold text-gray-900 dark:text-white text-xl"></span>
                    </p>
                    <p id="backup-summary-total-failed-container" class="hidden mb-4"
                        data-i18n="summary.total_backup_failed">
                        <i class="fa-solid fa-xmark mr-1 text-red-700"></i>
                        <span id="backup-summary-total-failed" class="text-content">Failed to backup x games</span>
                        <button id="backup-failed-learn-more" type="button"
                            class="ms-2 text-blue-500 text-lg font-medium underline" data-i18n="alert.learn_more">
                            <span class="text-content">Learn More</span>
                        </button>
                    </p>
                    <p class="mb-4" data-i18n="summary.total_backup_size">
                        <span class="text-content">Total backup size:</span>
                        <span id="backup-summary-total-size"
                            class="font-semibold text-gray-900 dark:text-white text-xl"></span>
                    </p>
                    <p class="mb-4" data-i18n="summary.backup_saved_to">
                        <span class="text-content">Backup saved to:</span>
                        <span id="backup-summary-save-path"
                            class="font-semibold text-gray-900 dark:text-white text-xl"></span>
                    </p>
                </div>

                <div class="mt-8">
                    <button id="backup-summary-done" type="button" data-i18n="summary.done"
                        class="animate-fadeIn hidden text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700">
                        <i class="fa-solid fa-check mr-1"></i>
                        <span class="text-content">Done</span>
                    </button>
                </div>
            </div>

            <!-- Backup content -->
            <div id="backup-content" class="hidden">
                <div class="pb-4 bg-white dark:bg-gray-900 sticky top-0 flex flex-row justify-between items-center">
                    <label for="table-search" class="sr-only">Search</label>
                    <div class="relative mt-1">
                        <div
                            class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="none"
                                viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                            </svg>
                        </div>
                        <input type="text" id="backup-search"
                            class="block py-2 pt-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                            data-i18n-placeholder="main.search_for_games">
                    </div>
                    <div class="text-right">
                        <p id="backup-selected-count" class="text-lg text-gray-900 dark:text-white"></p>
                        <p id="backup-selected-size" class="text-sm text-gray-500 dark:text-gray-40e"></p>
                    </div>
                </div>

                <!-- Backup table -->
                <div
                    class="table-container table-height shadow-md rounded-lg overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-track-white scrollbar-thumb-slate-300 dark:scrollbar-track-gray-800 dark:scrollbar-thumb-slate-600">
                    <table class="w-full table-fixed text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <thead
                            class="sticky top-0 text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="w-4 py-3 pl-4">
                                    <div class="flex items-center">
                                        <input id="backup-checkbox-all-search" type="checkbox"
                                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:outline-none dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600">
                                        <label for="backup-checkbox-all-search" class="sr-only">checkbox</label>
                                    </div>
                                </th>
                                <th scope="col" class="pr-6 py-3 truncate w-3/12" data-i18n="main.game_name">
                                    <span class="text-content">Game Name</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-2/12" data-i18n="main.supported_plats">
                                    <span class="text-content">Supported Platforms</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-2/12" data-i18n="main.backup_size">
                                    <span class="text-content">Backup Size</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-2/12" data-i18n="main.newest_backup_time">
                                    <span class="text-content">Newest Backup Time</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-4 text-center" data-i18n="main.more">
                                    <span class="text-content">More</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Backup table content -->
                        </tbody>
                    </table>
                </div>

                <!-- Backup and database update button -->
                <div class="mt-4 mb-2 flex flex-row items-center">
                    <button id="backup-button" type="button" data-i18n="main.backup_selected"
                        class="whitespace-nowrap text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 dark:bg-blue-600 dark:hover:bg-blue-700">
                        <i id="backup-icon" class="fa-solid fa-arrow-right-long mr-1"></i>
                        <span id="backup-text" class="text-content">Backup Selected Games</span>
                    </button>

                    <button id="update-database" type="button" data-i18n="main.update_database"
                        class="ml-auto text-white bg-green-600 hover:bg-green-700 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-500 dark:hover:bg-green-600">
                        <i id="update-database-icon" class="fa-solid fa-rotate mr-1"></i>
                        <span id="update-database-text" class="text-content">Update Database</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Tab 2: Restore -->
        <div class="hidden" id="restore" role="tabpanel" aria-labelledby="restore-tab">
            <div id="restore-loading" role="status" class="flex justify-center" data-i18n="main.loading"></div>

            <!-- Restore summary -->
            <div id="restore-summary" class="w-full p-8 text-center hidden animate-fadeInShift">
                <h5 data-i18n="main.restore_complete" class="mb-8 text-5xl font-bold text-gray-900 dark:text-white">
                    <span class="text-content">Restore Complete</span>
                </h5>

                <div class="flex justify-center items-center mb-8">
                    <i class="fa-solid fa-circle-check text-green-500 fa-5x"></i>
                </div>

                <div class="text-lg text-gray-700 dark:text-gray-300 mb-6">
                    <p class="mb-4" data-i18n="summary.total_games_restored">
                        <span class="text-content">Total games restored:</span>
                        <span id="restore-summary-total-games"
                            class="font-semibold text-gray-900 dark:text-white text-xl"></span>
                    </p>
                    <p id="restore-summary-total-failed-container" class="hidden mb-4"
                        data-i18n="summary.total_restore_failed">
                        <i class="fa-solid fa-xmark mr-1 text-red-700"></i>
                        <span id="restore-summary-total-failed" class="text-content">Failed to restore x games</span>
                        <button id="restore-failed-learn-more" type="button"
                            class="ms-2 text-blue-500 text-lg font-medium underline" data-i18n="alert.learn_more">
                            <span class="text-content">Learn More</span>
                        </button>
                    </p>
                    <p class="mb-4" data-i18n="summary.total_restore_size">
                        <span class="text-content">Total restore size:</span>
                        <span id="restore-summary-total-size"
                            class="font-semibold text-gray-900 dark:text-white text-xl"></span>
                    </p>
                    <p class="mb-4" data-i18n="summary.restored_from">
                        <span class="text-content">Restored from:</span>
                        <span id="restore-summary-save-path"
                            class="font-semibold text-gray-900 dark:text-white text-xl"></span>
                    </p>
                </div>

                <div class="mt-8">
                    <button id="restore-summary-done" type="button" data-i18n="summary.done"
                        class="animate-fadeIn hidden text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700">
                        <i class="fa-solid fa-check mr-1"></i>
                        <span class="text-content">Done</span>
                    </button>
                </div>
            </div>

            <!-- Restore content -->
            <div id="restore-content" class="hidden">
                <div class="pb-4 bg-white dark:bg-gray-900 sticky top-0 flex flex-row justify-between items-center">
                    <label for="table-search" class="sr-only">Search</label>
                    <div class="relative mt-1">
                        <div
                            class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="none"
                                viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                            </svg>
                        </div>
                        <input type="text" id="restore-search"
                            class="block py-2 pt-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                            data-i18n-placeholder="main.search_for_games">
                    </div>
                    <div class="text-right">
                        <p id="restore-selected-count" class="text-lg text-gray-900 dark:text-white"></p>
                        <p id="restore-selected-size" class="text-sm text-gray-500 dark:text-gray-40e"></p>
                    </div>
                </div>

                <!-- Restore table -->
                <div
                    class="table-container table-height shadow-md rounded-lg overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-track-white scrollbar-thumb-slate-300 dark:scrollbar-track-gray-800 dark:scrollbar-thumb-slate-600">
                    <table class="w-full table-fixed text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <thead
                            class="sticky top-0 text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="w-4 py-3 pl-4">
                                    <div class="flex items-center">
                                        <input id="restore-checkbox-all-search" type="checkbox"
                                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:outline-none dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600">
                                        <label for="restore-checkbox-all-search" class="sr-only">checkbox</label>
                                    </div>
                                </th>
                                <th scope="col" class="pr-6 py-3 truncate w-3/12" data-i18n="main.game_name">
                                    <span class="text-content">Game Name</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-2/12" data-i18n="main.backup_count">
                                    <span class="text-content">Number of Backups</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-2/12" data-i18n="main.restore_size">
                                    <span class="text-content">Backup Size</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-2/12" data-i18n="main.newest_backup_time">
                                    <span class="text-content">Newest Backup Time</span>
                                </th>
                                <th scope="col" class="px-6 py-3 truncate w-4 text-center" data-i18n="main.more">
                                    <span class="text-content">More</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Restore table content -->
                        </tbody>
                    </table>
                </div>

                <!-- Restore button -->
                <div class="mt-4 mb-2 flex flex-row items-center">
                    <button id="restore-button" type="button" data-i18n="main.restore_selected"
                        class="whitespace-nowrap text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 dark:bg-blue-600 dark:hover:bg-blue-700">
                        <i id="restore-icon" class="fa-solid fa-arrow-right-long mr-1"></i>
                        <span id="restore-text" class="text-content">Restore Selected Games</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Tab 3: Custom Games -->
        <div class="hidden rounded-lg" id="custom" role="tabpanel" aria-labelledby="custom-tab">
            <div id="custom-content" data-accordion="collapse"
                class="custom-height overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-track-white scrollbar-thumb-slate-300 dark:scrollbar-track-gray-800 dark:scrollbar-thumb-slate-600">
            </div>

            <!-- Custom Buttons -->
            <div class="flex mt-4">
                <button type="button" id="custom-save-all" data-i18n="custom.save_all"
                    class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700">
                    <i class="fa-solid fa-floppy-disk mr-1"></i>
                    <span class="text-content">Save All</span>
                </button>

                <button type="button" id="custom-add-game" data-i18n="custom.add_game"
                    class="ml-auto text-white bg-green-600 hover:bg-green-700 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-green-500 dark:hover:bg-green-600">
                    <i class="fa-solid fa-plus mr-1"></i>
                    <span class="text-content">Add Game</span>
                </button>
            </div>
        </div>
    </div>

</body>

</html>